<template>
  <div :class="{ dark: isDark }" class="min-h-screen bg-neutral-50 dark:bg-neutral-900 transition-colors duration-300">
    <div class="flex h-screen overflow-hidden">
      <!-- 侧边栏 -->
      <Sidebar 
        :collapsed="sidebarCollapsed" 
        @toggle-collapse="toggleSidebar"
        class="transition-all duration-300"
      />
      
      <!-- 主内容区 -->
      <div class="flex-1 flex flex-col overflow-hidden">
        <!-- 顶部工具栏 -->
        <Header 
          @toggle-sidebar="toggleSidebar"
          @toggle-theme="toggleTheme"
          :is-dark="isDark"
        />
        
        <!-- 页面内容 -->
        <main class="flex-1 overflow-x-hidden overflow-y-auto bg-neutral-50 dark:bg-neutral-900 p-6">
          <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </main>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Sidebar from './components/Sidebar.vue'
import Header from './components/Header.vue'

const sidebarCollapsed = ref(false)
const isDark = ref(false)

const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value
}

const toggleTheme = () => {
  isDark.value = !isDark.value
  localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
}

onMounted(() => {
  // 读取本地存储的主题设置
  const savedTheme = localStorage.getItem('theme')
  if (savedTheme === 'dark') {
    isDark.value = true
  }
})
</script>

